{% include "header.html" %}
<!-- Page Name -->
<div id="page-name">
    <div class="row">
        <div class="twelve columns">
            <h1>Quiz</h1>
        </div>
    </div>
</div>
  <!-- Main Page Content and Sidebar -->
  <div class="row">
    <!-- Page Details -->
    <section class="eight columns">
      <article class="post">
	      <div class="row">
		      <div class="twelve columns">
			      <h2 class="titulo-quiz">{{ quiz.title }}</h2>
			      <p>Parabéns <span class="red">{{ request.user.first_name }}</span>, você finalizou o Quiz em <span class="green">{{ total_time }}</span> e acertou <span class="red"> {{ correct_answers_amount }}</span> perguntas e fez <span class="red"> {{ helper.points }}</span> pontos. <br> Confira o gabarito:</p>
                  {%  for questionhelper in helper.questionhelper_set.all %}
                      <h3 class="pergunta"><span>{{ forloop.counter }}/{{ helper.questionhelper_set.count }}</span>{{ questionhelper.question.text }}</h3>
                      <form class="custom respostas">
                          <label for="radio1{{ forloop.counter }}"><input name="question{{ questionhelper.question.id }}" value="1" type="radio" id="radio1{{ forloop.counter }}" style="display: none; ">
                              <span class="custom radio"></span> {{ questionhelper.question.answer1 }}
                              {% if questionhelper.question.correct_answer == '1' %}
                                  <i class="general foundicon-checkmark green"></i>
                              {% else %}
                                  {% if questionhelper.user_answer == '1' %}
                                    <i class="general foundicon-remove red"></i>
                                  {% endif %}
                              {% endif %}
                          </label>
                          <label for="radio2{{ forloop.counter }}"><input name="question{{ questionhelper.question.id }}" value="2" type="radio" id="radio2{{ forloop.counter }}" style="display: none; ">
                              <span class="custom radio"></span> {{ questionhelper.question.answer2 }}
                              {% if questionhelper.question.correct_answer == '2' %}
                                  <i class="general foundicon-checkmark green"></i>
                              {% else %}
                                  {% if questionhelper.user_answer == '2' %}
                                      <i class="general foundicon-remove red"></i>
                                  {% endif %}
                              {% endif %}
                          </label>
                          {% if questionhelper.question.answer3 %}
                              <label for="radio3{{ forloop.counter }}"><input name="question{{ questionhelper.question.id }}" value="3" type="radio" id="radio3{{ forloop.counter }}" style="display: none; ">
                                  <span class="custom radio"></span> {{ questionhelper.question.answer3 }}
                                  {% if questionhelper.question.correct_answer == '3' %}
                                      <i class="general foundicon-checkmark green"></i>
                                  {% else %}
                                      {% if questionhelper.user_answer == '3' %}
                                          <i class="general foundicon-remove red"></i>
                                      {% endif %}
                                  {% endif %}
                              </label>
                          {% endif %}
                          {% if questionhelper.question.answer4 %}
                              <label for="radio4{{ forloop.counter }}"><input name="question{{ questionhelper.question.id }}" value="4" type="radio" id="radio4{{ forloop.counter }}" style="display: none; ">
                                  <span class="custom radio"></span> {{ questionhelper.question.answer4 }}
                                  {% if questionhelper.question.correct_answer == '4' %}
                                      <i class="general foundicon-checkmark green"></i>
                                  {% else %}
                                      {% if questionhelper.user_answer == '4' %}
                                          <i class="general foundicon-remove red"></i>
                                      {% endif %}
                                  {% endif %}
                              </label>
                          {% endif %}
                          {% if questionhelper.question.answer5 %}
                              <label for="radio5{{ forloop.counter }}"><input name="question{{ questionhelper.question.id }}" value="5" type="radio" id="radio5{{ forloop.counter }}" style="display: none; ">
                                  <span class="custom radio"></span> {{ questionhelper.question.answer5 }}
                                  {% if questionhelper.question.correct_answer == '5' %}
                                      <i class="general foundicon-checkmark green"></i>
                                  {% else %}
                                      {% if questionhelper.user_answer == '5' %}
                                          <i class="general foundicon-remove red"></i>
                                      {% endif %}
                                  {% endif %}
                              </label>
                          {% endif %}
                      </form>
                  {% endfor %}
			      <hr>
		      </div>
	      </div>
      </article>
    </section>
      <!-- End Contact Details -->
      <!-- Sidebar -->
      <aside class="four columns">
          <div class="cronometro">
              <i class="general foundicon-clock"></i> {{ total_time }}
          </div>
      </aside>
      <!-- Included JS Files (Compressed) -->
      <script src="{{ MEDIA_URL }}javascripts/jquery.js"></script>
      <script src="{{ MEDIA_URL }}javascripts/foundation.min.js"></script>
      <!-- Initialize JS Plugins -->
      <script src="{{ MEDIA_URL }}javascripts/app.js"></script>
      <script type="text/javascript">
          $('#slider').orbit({
              animation: 'horizontal-push',                  // fade, horizontal-slide, vertical-slide, horizontal-push
              animationSpeed: 800,                // how fast animtions are
              timer: false, 			 // true or false to have the timer
              resetTimerOnClick: false,           // true resets the timer instead of pausing slideshow progress
              advanceSpeed: 4000, 		 // if timer is enabled, time between transitions
              pauseOnHover: true, 		 // if you hover pauses the slider
              startClockOnMouseOut: false, 	 // if clock should start on MouseOut
              startClockOnMouseOutAfter: 1000, 	 // how long after MouseOut should the timer start again
              directionalNav: false, 		 // manual advancing directional navs
              captions: false, 			 // do you want captions?
              captionAnimation: 'fade', 		 // fade, slideOpen, none
              captionAnimationSpeed: 800, 	 // if so how quickly should they animate in
              bullets: true,			 // true or false to activate the bullet navigation
              bulletThumbs: false,		 // thumbnails for the bullets
              bulletThumbLocation: '',		 // location from this file where thumbs will be
              afterSlideChange: function(){}, 	 // empty function
              fluid: '16x6'                         // or set a aspect ratio for content slides (ex: '4x3')
          });
      </script>
      <!-- End Sidebar -->
  </div>
<!-- End Main Content and Sidebar -->
{% include "footer.html" %}